<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
	</head>
	<body>
		<!--<div id="app">
		<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
  </div>
  <script type="text/x-template" id="tem">
   <input v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
          style="border:teal solid 2px;">		
		</script>
		
		
<script type="text/javascript">
	
Vue.component('custom-input', {
  props: ['value'],
  template: '#tem'
})
	
	new Vue({
		el:'#app',
		data:{
			bb:'123',
			searchText:'231563156'
		}
		
	})
	
	
	
</script>-->

  <!--组件上面使用v-model-->
 <div id="app">
  <cc-bb
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></cc-bb>
 </div>
 
 <script type="text/x-template" id="tem">
 	<input v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
          style="border:teal solid 2px;">	
 	<!--绑定的值就是当前的value的值-->
 		    <!--当前这个input标签监听一个对像值就是改变的值-->
 	
 </script>
 
 <script type="text/javascript">
 	Vue.component('cc-bb',{
 		props:['value'],
 		template:'#tem'
 	})
 	new Vue({
		el:'#app',
		data:{
			bb:'123',
			searchText:'231563156'
		}
		
	})
 </script>

	</body>
</html>
